<template>
    <div class="login-wrapper">
        <!-- model 属性 表单数据对象 -->
  <el-form :model="user"  :rules="rules" ref="loginForm"  class="login-form">
            <h1>后台管理系统</h1>
            <!-- 用户名  prop属性 是为了传递表单的数据，也就是说传递的是form的model中的字段 -->
  <el-form-item  prop="username">
    <el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input>
  </el-form-item>
    <!-- 密码 -->
  <el-form-item  prop="password">
    <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
  </el-form-item>
    <!-- 记住密码 -->
  <el-form-item >
    <el-checkbox v-model="user.checked">记住密码</el-checkbox>
  </el-form-item>
    <!-- 登录按钮 -->
  <el-form-item>
    <el-button type="primary" @click="loginHandler">登录</el-button>
    <!-- <el-button @click="resetFormhandler">重置</el-button> -->
  </el-form-item>
</el-form>
    </div>
</template>

<script>
export default {
    data(){
        return {
            user:{
                username:'',
                password:'',
                checked:false
            },
            // 表单验证
            rules:{
                username:[ //验证用户名            blur失去焦点的时候进行验证
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password:[//验证密码
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]
            }
        }
    },
    // 组件挂载完成执行该方法
    mounted() {
        let checked = JSON.parse(localStorage.getItem('checked')) // true/false
        console.log('是否被选中:' + checked);
        this.user.checked = checked // 把当前是否选中的状态记录一下，赋值给user对象的数据
        // 把存储起来的用户信息，放到输入框中
        this.user.username = localStorage.getItem('username')
        this.user.password = localStorage.getItem('password')
    },
    methods:{
        loginHandler(){
            console.log('用户点击了登录按钮');
            // validate该方法是表单验证的内置方法 用来对表单进行验证
            this.$refs.loginForm.validate(async (valid)=>{
                // valid为true 说明校验通过，false说明校验不通过
                if(valid){
                    let rs = await this.$http.post('/api/user/login',{
                        // 第一个参数是请求的地址，第二参数永远是向服务器发送的数据
                        username:this.user.username, //  用户名
                        password:this.user.password,  //密码
                    })
                        console.log(rs);
                        // 如果登录失败了
                    if(rs.data.code == -1){
                        this.$message({
                        message: rs.data.message,
                         type: 'error'
                     });
                    }else{//登录成功了
                        // 将用户名保存在sessionStorage中 会话存储 
                        // setItem 设置存储字段  getItem获取存储字段
                        sessionStorage.setItem('username',this.user.username)
                        // 如果用户勾选了记住密码呢？
                        if(this.user.checked){ //永久存储
                            localStorage.setItem('username',this.user.username) //用户名
                            localStorage.setItem('password',this.user.password)//密码
                            localStorage.setItem('checked',this.user.checked)//是否选中状态 true
                        }else{//如果没有勾选呢？
                            localStorage.removeItem('username')
                            localStorage.removeItem('password')
                            localStorage.removeItem('checked')
                        }
                        // 消息框提升
                        this.$message({
                        message: rs.data.message,
                         type: 'success'
                      });

                    //   跳转到后台管理系统的首页页面
                    // this.$router.push('/home)
                    this.$router.replace('/home')
                    }
                }else{//如果验证没有通过
                            console.log('验证失败，请重新核对登录信息');
                            return false
                    }
            });
        }
    }

}
</script>

<style scoped>
.login-wrapper {

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.login-form {
  box-sizing: border-box;
  width: 500px;
  height: 400px;
  box-shadow: 1px 1px 15px #eee;
  border-radius: 8px;
  padding: 30px;
}

.login-form h1 {
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 900;
  text-align: center;
}

button {
  width: 100%;
}

</style>